import React from 'react';
import './FileTransferPanel.css';

function FileTransferPanel({ transfers, onDownload }) {
  const formatFileSize = (bytes) => {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
    if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
    return (bytes / (1024 * 1024 * 1024)).toFixed(1) + ' GB';
  };

  const getFileIcon = (fileName) => {
    const ext = fileName.split('.').pop().toLowerCase();

    if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(ext)) return '🖼️';
    if (['mp4', 'avi', 'mov', 'mkv'].includes(ext)) return '🎬';
    if (['mp3', 'wav', 'flac', 'aac'].includes(ext)) return '🎵';
    if (['pdf'].includes(ext)) return '📄';
    if (['zip', 'rar', '7z', 'tar', 'gz'].includes(ext)) return '📦';
    if (['doc', 'docx', 'txt'].includes(ext)) return '📝';

    return '📁';
  };

  return (
    <div className="file-transfer-panel">
      <div className="file-transfer-header">
        <h3>File Transfers</h3>
        <span className="transfer-count">{transfers.length}</span>
      </div>

      <div className="file-transfer-list">
        {transfers.length === 0 ? (
          <div className="no-transfers">
            <p>No file transfers</p>
            <small>Sent and received files will appear here</small>
          </div>
        ) : (
          transfers.map((transfer, index) => (
            <div key={index} className="transfer-item">
              <div className="file-icon">
                {getFileIcon(transfer.fileName)}
              </div>
              <div className="transfer-info">
                <div className="file-name">{transfer.fileName}</div>
                <div className="file-size">{formatFileSize(transfer.fileSize)}</div>
                {transfer.progress !== undefined && (
                  <div className="progress-bar">
                    <div
                      className="progress-fill"
                      style={{ width: `${transfer.progress * 100}%` }}
                    ></div>
                  </div>
                )}
              </div>
              <div className="transfer-actions">
                {transfer.status === 'pending' && '⏳'}
                {transfer.status === 'uploading' && '⬆️'}
                {transfer.status === 'transferring' && '⬇️'}
                {transfer.status === 'completed' && (
                  <button
                    className="download-btn"
                    onClick={() => onDownload && onDownload(transfer.fileId, transfer.fileName)}
                    title="Download"
                  >
                    💾
                  </button>
                )}
                {transfer.status === 'failed' && '❌'}
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}

export default FileTransferPanel;
